<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>composition API-context</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
	//attrs, slots, emit
  const app = Vue.createApp({
    template: `
      <child app='app' @change="parentChange"> parent</child>
    `,
		methods:{
			parentChange(){
				console.log('parent Change')
			}
		}
  });
	app.component('child',{
		template: `
      <div @click='handleClick'>child</div>
    `,
		// mounted() {
		// this.$emit('change')
		// },
		setup(props,context) {
			const { h } =Vue
			const {attrs, slots, emit} = context
			//  attrs 父组件传递过来 None-Props 属性
			console.log(attrs)
			// slots 插槽
			console.log(slots.default())
			//emit
			// return ()=> h('div',{	}, slots.default())
			function handleClick(){
				emit('change')
			}
			return {
				handleClick
			}
		}
	})
  const vm = app.mount('#root');
</script>
</html>